<template>
  <el-dialog :visible.sync="centerDialogVisible"
             :close-on-click-modal="clickModalHide"
             :before-close="closeDialog" width="390px"
             title="报废" class="bf_dialog">
    <el-form  ref="ruleForm" :model="bfForm"  :rules="rules" label-width="100px" class="demo-ruleForm gzBf">
      <el-form-item label="工装名称：" prop="name">
        <el-input v-model="rowData.gzName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="批准文件：" prop="desc">
        <el-upload
          :data="bfForm"
          :on-change="fileChange"
          :on-remove="removeFile"
          :on-success="closeFile"
          :limit="1"
          class=" fileselect"
          accept=".pdf,.PDF"
          style="text-align: right"
          action="/autoMonitor/manage/uploadFile"
          ref="gzFileUpload"
          :auto-upload="false">
          <el-button type="primary" title="请上传pdf格式文件" ><i class="fa fa-plus" aria-hidden="true"></i></el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="报废理由：" prop="bfReason">
        <el-input type="textarea"  :rows="3" v-model="bfForm.bfReason" ></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="submitForm">确定</el-button>
      <el-button @click="resetForm">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    name: 'BfEdit',
    props: ['rowData'],
    data() {
      return {
        centerDialogVisible: false,
        clickModalHide: false,
        count:0,
        fileCount:0,
        bfForm:{relateId:"",bfReason:"",type:"0",filePath:""},
        rules: {
          bfReason: [
            {required: true, message: '请输入报废理由', trigger: 'blur'}
          ]
        }
      }
    },

    components:{

    },


    methods: {

      submitWithOutFile(){
        let self = this;
        self.$http({
          url: "/autoMonitor/manage/uploadFileWithOutFile",
          method: "post",
          data: JSON.stringify(self.bfForm),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
           self.closeFile(resp);
        });
      },

      submitForm(){
        if(this.count == 0){
          if(this.bfForm.bfReason){
            if(this.fileCount == 0){
              this.submitWithOutFile();
            }else{
              this.$refs.gzFileUpload.submit();
            }
          }else{
            this.notifyMsg("请填写完信息！","warning");
            this.count=0;
            return ;
          }
        }
        this.count=1;
      },

      resetForm(){
        this.closeDialog();
      },

      removeFile(file, fileList){
        this.fileCount --;
      },


      fileChange(file, fileList){
        this.fileCount ++;
      },

      //关闭弹窗
      closeDialog() {
        this.$refs.gzFileUpload.clearFiles();
        this.centerDialogVisible = false;
      },

      closeFile(response, file, fileList){
        if(response.success){
          this.notifyMsg("报废成功","success");
          this.$eventBus.$emit("updateGongzhuang");
          this.closeDialog();
        }else{
          this.notifyMsg("报废出现异常","error");
        }
      },

      notifyMsg(msg,type){
        this.$notify({
          title: '提示',
          message: msg,
          type:type?type:'warning'
        });
      },

    },
    watch: {
      rowData(val){
        this.bfForm = val;
        this.count = 0;
        this.fileCount = 0;
        this.centerDialogVisible = true;
      }
    }
  }
</script>
<style>
.gzBf .el-upload-list{
  margin-top: -17%;
  margin-left: 40px;
}
.gzBf .fileselect{
  text-align: left !important;
}

  .gzBf .el-input--medium .el-input__inner {
    height: 29px;
    line-height: 29px;
  }

  .gzBf  .el-button--medium {
    padding: 3px 6px !important;
  }
</style>
